<template>
  <div class="complete-view">
    <van-transition :show="showImg" custom-class="block" name="fade-down">
      <div
        class="medal-img zoomIn"
        @click.stop="doNothing"
        :style="'background-image:url('+ medalImg + ')'"
      >
        <div class="close-btn2" @click.stop="closeModal"></div>
        <div class="medal-text">恭喜您完成一次{{chineseType}}打卡</div>
        <div class="share-now" @click.stop="shareHandler">立刻分享>>>></div>
      </div>
    </van-transition>
    <img :src="medalImg" style="display:none">
  </div>
</template>

<script>
import cloudHandler from '../../../cloud/index';
const chineseMap = {
  listening: "听力",
  speaking: "口语",
  reading: "阅读",
  writing: "写作",
  all: "考试"
};
export default {
  props: {
    show: {
      type: Boolean
    },
    dakaData: {
        type: Object
    }
  },
  data() {
    return {
      showImg: false
    };
  },
  computed: {
    cardType() {
        return this.dakaData && this.dakaData.cardType;
    },
    medalImg() {
      if (!this.cardType) return "";
      const baseUrl = "http://cdn2.ielts.group/打卡成功页面-";
      return baseUrl + chineseMap[this.cardType] + ".png";
    },
    chineseType() {
        if (this.cardType) return chineseMap[this.cardType];
        return '';
    },
  },
  methods: {
    closeModal() {
      this.$emit("close");
    },
    shareHandler() {
      console.log(this.globalData.userInfo);
      const request = {
        avatar: this.globalData.userInfo.avatarUrl,
        gender: this.globalData.userInfo.gender,
        nickName: this.globalData.userInfo.nickName,
        openid: this.globalData.userInfo.openid
      }
      cloudHandler.shareImg(request)
      .then((res) => {
        wx.previewImage({
          urls: [res.body.data.image] // 需要预览的图片http链接列表
        });
      })
      .catch(err => {
        console.log(err);
      })

    },
    doNothing() {}
  },
  mounted() {
    setTimeout(() => {
      this.showImg = true;
    }, 30);
  },
};
</script>

<style lang="less" scoped>
.complete-view {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9;
  .close-btn2 {
    top: 34px;
    right: 53px;
    width: 16px;
    height: 16px;
    position: absolute;
    background:url(http://cdn.ielts.group/close-btn.png) center center no-repeat;
    background-size: cover;
  }
  .medal-img {
    width: 300px;
    height: 260px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .medal-text {
      font-size: 12px;
      font-weight: 600;
      color: rgba(221, 245, 243, 1);
      position: absolute;
      width: 170px;
      height: 22px;
      background:url('http://cdn2.ielts.group/%E5%BD%A9%E5%B8%A6%403x.png') center center no-repeat;
      background-size: 100%;
      bottom: 65px;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      background-position-y: -4px;
    }
    .share-now {
      font-size: 16px;
      font-weight: 500;
      color: rgba(221, 245, 243, 1);
      line-height: 22px;
      width: 155px;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      margin: auto;
    }
  }
}
// animate
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
</style>